<template>
    <div class="comment">
        <div class="comment-title">评论</div>
        <div class="divider"></div>
          <template v-for="comment in commentListShow">
            <div class="commentlist">
              <div>
                <img class="avatar" :src='comment.userHeadPortrait' />
              </div>
              <div class="comment-right">
              <div style="display:flex;justify-content: space-between">
                <div class="name"> <span>{{comment.userNickName}}</span></div>
                <div class="date"> <span>{{comment.gmtCreated}}</span></div>
              </div>
              <div class="content">
                <span>{{comment.content}}</span>
              </div>
              <div class="replay">
                  <template v-for="reply in comment.replyList">
                        <div class="commentlist">
                          <div><span><img class="avatar" :src='reply.userHeadPortrait'/></span></div>
                          <div class="comment-right">
                            <div style="display:flex;justify-content: space-between">
                              <div> <span class="name">{{reply.userNickName}}</span> 回复 <span class="name">{{comment.userNickName}}</span></div>
                              <div class="date"> <span>{{reply.gmtCreated}}</span></div>
                            </div>
                            <div class="content">
                              <span>{{reply.content}}</span>
                            </div>
                          </div>
                        </div>
             </template>
         </div>
      </div>
      </div>
      <div class="divider"></div>
      </template>
    </div>
</template>

<script>
    import util from '@/libs/util'
    export default {
        // name: 'comment-list',
        props: {
            commentList: {
                type: Array,
                default: () => [],
                required: true
            }
        },
        data() {
            return {
              
            }
        },
        computed:{
            commentListShow(){
              let list=[];
              this.commentList.forEach((item) => {
              item.gmtCreated = util.dateDiff(item.gmtCreated);
              if (item.parentId == 0) {
                item.replyList = this.commentList.filter((replyItem) => {
                  return replyItem.parentId == item.id;
                })
                list.push(item);
               }
              })
              return list;
            }
        },
        mounted() {
              console.log(this.commentList)
              
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
    .comment {
        margin-top: 10px;
        margin-bottom: 80px;
        background: white;
        .comment-title {
            text-align: left;
            font-size: 16px;
            color: #333333;
            letter-spacing: 0;
            padding: 10px;
        }
        .commentlist {
            padding: 10px;
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            .comment-right {
                display: flex;
                width: 85%;
                justify-content: space-between;
                flex-direction: column
            }
            .name {
                font-family: PingFangSC-Regular;
                font-size: 15px;
                color: #FE9000;
                letter-spacing: 0;
                text-align: left
            }
            .date {
                font-size: 11px;
                color: #999999;
                letter-spacing: 0;
            }
            .content {
                text-align: left;
                font-family: PingFangSC-Regular;
                font-size: 13px;
                color: #666666;
                letter-spacing: 0;
            }
            .replay {
                margin-top: 5px;
                background: #F5F5F5;
                text-align: left;
            }
        }
    }
</style>
